@import "@automattic/onboarding/styles/mixins";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.theme__sheet-style-variations {
	position: relative;

	@include breakpoint-deprecated( "<960px" ) {
		margin-bottom: -16px;
		padding: 0 0 0 24px;

		&::after {
			@include long-content-fade( $direction: right, $size: 24px );
			height: 100%;
		}
	}

	.theme__sheet-style-variations-header {
		display: flex;
		flex-direction: column;
		gap: 8px;

		@include breakpoint-deprecated( "<960px" ) {
			button {
				display: none;
			}
		}

		p {
			color: var(--color-neutral-60);
			font-size: $font-body-small;
			letter-spacing: -0.15px;
			line-height: 20px;
			margin: 0;

			a {
				color: var(--color-neutral-60);
				text-decoration: underline;
			}
		}

		.premium-badge {
			-webkit-font-smoothing: antialiased;
		}
	}

	.global-styles-variations__item {
		flex-basis: 80px;
		flex-shrink: 0;

		@include break-xlarge {
			flex-basis: 120px;
		}
	}
}
